<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>葫芦文化节</title>
  <style>
    /* 全局样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family:
        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8f9fa;
      height: 100vh;
      overflow: hidden;
    }

    /* 应用容器 */
    .app {
      display: flex;
      flex-direction: column;
      height: 100vh;
      background: #f8f9fa;
    }

    /* 主内容区域 */
    .main-content {
      flex: 1;
      overflow-y: auto;
    }

    /* 底部导航栏 */
    .bottom-navbar {
      flex: 0;
      background: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #333333;
      padding: 0.6rem 0 0.5rem 0;
      width: 50%;
      cursor: pointer;
      user-select: none;
    }

    .nav-item.active {
      color: #333333;
    }

    .nav-icon-wrapper {
      position: relative;
      margin-bottom: 0.2rem;
    }

    .nav-icon {
      width: 1.5rem;
      height: 1.8rem;
    }

    .nav-icon-fallback {
      width: 1.5rem;
      height: 1.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      background: #f0f0f0;
    }

    .nav-label {
      font-size: 0.7rem;
      font-weight: 500;
    }

    /* 主页样式 */
    .home {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
    }

    /* 文化节横幅 */
    .festival-banner {
      flex: 0 0 15rem;
      position: relative;
      background-image: url('./images/banner.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .festival-logo {
      width: 11rem;
      margin: 1.1rem 1.2rem;
    }

    /* Banner文字样式 */
    .banner-text {
      text-align: center;
    }

    .festival-title {
      color: #2d5a27;
      font-size: 1.7rem;
      font-weight: 700;
      margin: 0 0 0.8rem 0;
      -webkit-text-stroke: 0px #ffffff;
      text-shadow:
        -2px -2px 0 #ffffff,
        2px -2px 0 #ffffff,
        -2px 2px 0 #ffffff,
        2px 2px 0 #ffffff,
        0 0 2px rgba(0, 0, 0, 0.3);
    }

    .competition-subtitle {
      color: #2d5a27;
      font-size: 1.7rem;
      font-weight: 600;
      margin: 0 0 0.8rem 0;
      -webkit-text-stroke: 0px #ffffff;
      text-shadow:
        -2px -2px 0 #ffffff,
        2px -2px 0 #ffffff,
        -2px 2px 0 #ffffff,
        2px 2px 0 #ffffff,
        0 0 2px rgba(0, 0, 0, 0.3);
      line-height: 1.2;
    }

    .registration-time {
      color: #2d5a27;
      font-size: 1.2rem;
      font-weight: 600;
      margin: 0;
      -webkit-text-stroke: 0px #ffffff;
      text-shadow:
        -1px -1px 0 #ffffff,
        2px -2px 0 #ffffff,
        -2px 2px 0 #ffffff,
        2px 2px 0 #ffffff,
        0 0 2px rgba(0, 0, 0, 0.3);
      padding: 0.3rem 0.8rem;
      border-radius: 1rem;
      display: inline-block;
    }

    /* 比赛卡片区域 */
    .competitions-section {
      position: relative;
      flex: 1;
      padding: 1rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      overflow: auto;
      background-image: url('./images/page-bg.png');
      background-size: 100% 100%;
      background-position: center;
      background-repeat: no-repeat;
    }

    .more-btn {
      position: fixed;
      bottom: 5rem;
      right: 1.2rem;
      width: 1.2rem;
    }

    .competition-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #e4fad3;
      border-radius: 1rem;
      padding: 1rem 0 0.8rem 0;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      border: 2px solid #a8d5a8;
    }

    .card-header {
      margin-bottom: 0.6rem;
      text-align: center;
    }

    .competition-title {
      color: #005918;
      font-size: 1.1rem;
      font-weight: 600;
      margin: 0 0 0.2rem 0;
    }

    .registration-info {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.9rem;
      flex-wrap: wrap;
    }

    .time-label {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffd700;
      color: #2c3e50;
      height: 1.6rem;
      width: 5rem;
      border-radius: 1rem;
      font-size: 0.8rem;
      font-weight: 500;
    }

    .time-range {
      color: #333333;
      font-size: 0.9rem;
    }

    .register-btn {
      width: 60%;
      padding: 0.5rem 0 0.4rem 0;
      border: none;
      border-radius: 10px;
      font-size: 1rem;
      font-weight: 600;
      color: #ffffff;
      cursor: pointer;
    }

    /* 其他页面样式 */
    .page {
      padding: 2rem;
      text-align: center;
      color: #333;
    }

    .page h1 {
      margin-bottom: 1rem;
      color: #005918;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="app">
      <main class="main-content">
        <!-- 路由视图 -->
        <div v-if="currentPage === 'home'" class="home">
          <!-- 文化节横幅 -->
          <div class="festival-banner">
            <div class="banner-content">
              <img class="festival-logo" src="./images/logo.png" alt="葫芦文化节" />
              <div class="banner-text">
                <h1 class="festival-title">中国 (聊城) 葫芦文化艺术节</h1>
                <h2 class="competition-subtitle">葫林争霸·葫芦种植能手大赛</h2>
                <p class="registration-time">报名时间:2025-09-01-2025-10-16</p>
              </div>
            </div>
          </div>

          <!-- 比赛卡片区域 -->
          <div class="competitions-section">
            <div v-for="item in competitions" :key="item.id" class="competition-card">
              <div class="card-header">
                <h3 class="competition-title">{{ item.title }}</h3>
              </div>
              <div class="registration-info">
                <span class="time-label">报名时间</span>
                <span class="time-range">{{ item.registrationTime }}</span>
              </div>
              <button class="register-btn" :style="{ backgroundColor: item.background }"
                @click="handleRegistration(item)">
                我要报名
              </button>
            </div>
            <img class="more-btn" src="./images/arrow-down.png" />
          </div>
        </div>

        <!-- 其他页面 -->
        <div v-if="currentPage === 'news'" class="page">
          <h1>报道</h1>
          <p>这里是报道页面</p>
        </div>

        <div v-if="currentPage === 'register'" class="page">
          <h1>报名</h1>
          <p>这里是报名页面</p>
        </div>

        <div v-if="currentPage === 'profile'" class="page">
          <h1>我的</h1>
          <p>这里是个人中心页面</p>
        </div>
      </main>

      <!-- 底部导航栏 -->
      <nav class="bottom-navbar">
        <div v-for="item in navItems" :key="item.id" class="nav-item" :class="{ active: isActive(item) }"
          @click="handleNavClick(item)">
          <div class="nav-icon-wrapper">
            <img v-if="!item.showFallback" class="nav-icon" :src="isActive(item) ? item.activeIcon : item.icon" />
            <div v-else class="nav-icon-fallback">
              {{ item.fallbackIcon }}
            </div>
          </div>
          <span class="nav-label">{{ item.name }}</span>
        </div>
      </nav>
    </div>
  </div>

  <!-- 引入Vue 2 -->
  <script src="./js/vue.min.js"></script>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          // 当前页面
          currentPage: 'home',

          // 导航菜单配置数组
          navItems: [{
              id: 'home',
              name: '文化节',
              path: '/',
              icon: './images/tab-home.png',
              activeIcon: './images/tab-home-active.png',
              showFallback: false
            },
            {
              id: 'news',
              name: '报道',
              path: '/news',
              icon: './images/tab-news.png',
              activeIcon: './images/tab-news-active.png',
              showFallback: false
            },
            {
              id: 'register',
              name: '报名',
              path: '/register',
              icon: './images/tab-register.png',
              activeIcon: './images/tab-register-active.png',
              showFallback: false
            },
            {
              id: 'profile',
              name: '我的',
              path: '/profile',
              icon: './images/tab-me.png',
              activeIcon: './images/tab-me-active.png',
              showFallback: false
            }
          ],

          // 比赛卡片配置数组
          competitions: [{
              id: 'planting',
              title: '葫林争霸·葫芦种植能手大赛',
              registrationTime: '2025. 09.01----2025. 10. 16',
              background: '#2d5a27', // 深绿色
              status: 'open' // open, closed, upcoming
            },
            {
              id: 'creative',
              title: '奇葫妙想·葫芦文创大赛',
              registrationTime: '2025. 08. 25----2025. 09. 25',
              background: '#dc143c', // 深红色
              status: 'open'
            },
            {
              id: 'craft',
              title: '百葫雅韵·葫芦工艺大赛',
              registrationTime: '2025. 08. 25----2025. 09. 30',
              background: '#4169e1', // 深蓝色
              status: 'open'
            }
          ]
        }
      },
      computed: {
        // 计算当前激活的导航项
        activeNavId() {
          const foundItem = this.navItems.find(
            item => item.path === this.getCurrentPath()
          )
          return foundItem ? foundItem.id : 'home'
        }
      },
      methods: {
        // 获取当前路径
        getCurrentPath() {
          return this.currentPage === 'home' ? '/' : `/${this.currentPage}`
        },

        // 导航点击处理函数
        handleNavClick(item) {
          if (item.id === 'register') {
            window.location.href = './register.html'
            return
          }
          if (item.path !== this.getCurrentPath()) {
            this.currentPage = item.id
          }
        },

        // 判断导航项是否激活
        isActive(item) {
          return this.activeNavId === item.id
        },

        // 报名处理函数
        handleRegistration(item) {
          // 跳转到报名表单页面
          this.currentPage = 'register'
          console.log('报名比赛:', item.title)
        }
      }
    })
  </script>
</body>

</html>
